<template>
  <div>
    <el-card class="box-card">
      <!-- 表头 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/menulist' }">菜单列表</el-breadcrumb-item>
          <el-breadcrumb-item>新增菜单列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 用户信息 -->

      <el-form
        :label-position="labelPosition"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="ruleForm.menuName" style="width:30%"></el-input>
        </el-form-item>
        <el-form-item label="菜单icon" prop="menuIcon">
          <el-input v-model="ruleForm.menuIcon" style="width:30%"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址">
          <el-input v-model="ruleForm.menuUrl" style="width:30%"></el-input>
        </el-form-item>

        <el-form-item label="父级菜单">
          <el-select v-model="ruleForm.menuParentId" placeholder="选择父级菜单" style="width:30%">
            <el-option
              v-for="(item,index) in menuList"
              :key="index"
              :label="item.menuName"
              :value="item.menuId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单状态" prop="menuStatus">
          <el-radio-group v-model="ruleForm.menuStatus">
            <el-radio :label="1">有效</el-radio>
            <el-radio :label="2">无效</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import base from "../api/base.js";
export default {
  data() {
    return {
      menuList: [], //获取菜单列表
      // 上传用户头像
      fileList: [],
      upload: "",
      dialogImageUrl: "",
      dialogVisible: false,
      labelPosition: "left", //居左
      //   from表单验证消息
      ruleForm: {
        menuName: "",
        menuIcon: "",
        menuUrl: "",
        menuParentId: "",
        menuStatus: ""
      },
      rules: {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" }
        ],
        // menuIcon: [
        //   { required: true, message: "请输入菜单名称icon", trigger: "blur" }
        // ],

        menuStatus: [
          { required: true, message: "请选择菜单状态", trigger: "change" }
        ]
      }
    };
  },

  created() {
    setTimeout(() => {
      // 获取管理员id
      console.log("获取menuId", this.$route.query.menuId);
      if (this.$route.query.menuId) {
        // 获取管理员详情
        this.$http.article
          .getmenulist({ yjMenuId: this.$route.query.menuId })
          .then(res => {
            console.log("获取菜单详情", res);
            this.ruleForm = res.result; //回显原数据
            // this.fileList.push({ url: res.result.adminHeadImg }); //回显照片
          });
      }
    });
  },

  mounted() {
    // 请求菜单列表;
    this.$http.article.meuList().then(res => {
      this.menuList = res.result;
      console.log("获取菜单列表", res);
    });
  },
  methods: {
    backMessage() {
      console.log("回复消息");
    },

    // 弹窗信息
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // 如果值匹配请求接口
        if (valid) {
          console.log(this.ruleForm);

          if (this.$route.query.menuId) {
            var key = "menuId";
            var value = this.$route.query.menuId;
            this.ruleForm[key] = value;
            this.$http.article.addmenulist(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success("修改成功");
              this.$router.push("/home/menulist");
            });
            return;
          } else {
            this.$http.article.addmenulist(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success("新增成功");
              this.$router.push("/home/menulist");
            });
          }

          //   if (this.$route.query.adminId) {
          //     var key = "adminId";
          //     var value = this.$route.query.adminId;
          //     this.ruleForm[key] = value;
          //     console.log(this.ruleForm);
          //     this.$http.article.roleAddAdmin(this.ruleForm).then(res => {
          //       if (res.code == 200) {
          //         this.$message({
          //           message: res.msg,
          //           type: "success"
          //         });
          //         this.$router.push("/home/authority");
          //       } else {
          //         this.$message.error(res.msg);
          //       }
          //     });
          //     return;
          //   } else {
          //     this.$http.article.roleAddAdmin(this.ruleForm).then(res => {
          //       console.log("提交信息后台管理员信息", res);
          //       if (res.code == 200) {
          //         this.$message({
          //           message: res.msg,
          //           type: "success"
          //         });
          //         this.$router.push("/home/authority");
          //       } else {
          //         this.$message.error(res.msg);
          //       }
          //     });
          //   }
        } else {
          console.log(this.ruleForm);
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 用户上传头像
    handleAvatarSuccess(file) {
      this.ruleForm.adminHeadImg = file.result;
      console.log("上传成功获取图片地址", file.result);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  //   overflow: hidden;
}
.box-card {
  //   display: flex;
  //   justify-content: center;
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
.size {
  vertical-align: middle;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
</style>